$(function(){
  // 1.获取url携带的参数id
  const id = location.search.substring(4)
  const token = localStorage.getItem('token')
  
  // 2.回退 添加点击事件
  $('.back').on('click',function(){
    window.history.go (-1)
  })

  // 3.头部导航渲染
  getAjaxList()
  function getAjaxList(){
    
    $.ajax({
      method:'GET',
      url:'http://124.223.14.236:3001/api/goods/cate',
      success:function(res){
        let str = '' 

        if(!res.success) return layer.msg('获取商品列表失败')
        // 遍历res.data
        res.data.forEach(item => {
          const {id, name} = item
          str += `<li data-id="${id}"><a href="javascript:;">${name}</a></li>`
        });
        console.log(str)
        // 赋值给ul
        $('.cate-list-fix ul').html(str)
      }
    })
  }

  // 4.头部列表，点谁谁高亮,事件委托
  $('.cate-list-fix').on('click', 'li', function () {
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active')
    
    // 获取id
    const cate_id = $(this).attr('data-id')
    goodsList(cate_id)
    
  })

  // 5.商品列表数据获取并渲染
  goodsList()
  function goodsList(id) {
    $.ajax({
      method: 'GET',
      url: 'http://124.223.14.236:3001/api/goods',
      data: {
        pageNum: 1,
        pageSize: 40,
        cate_id:id
      },
      success: function (res) {
        let str = ''
        if (!res.success) return layer.msg('获取商品列表失败')
        
        res.data.list.forEach(item => {
          const {id, title, price, img} = item
          str += `
            <li data-id="${id}">
              <img src="${img}" alt="">
              <h3>${title}</h3>
              <p>
                  <span>￥${price}</span>
                  <span>+</span>
              </p>
            </li>`
        })
        $('.good-list ul').html(str)
        
        // 判断res.data.list 是否为空，如果是就显示 empty 否则隐藏
        if (res.data.list.length === 0) {
          $('.desc').hide()
          $('.empty').show()
        } else {
          $('.empty').hide()
        }
      }
    })
  }

})